<template>
  <div class="wrapper1">


    <!--背景图片-->
    <div class="Bg">
    <div class="bg"></div>
    <div class="bgtop" >
      <a  href="">
        <img class="bgtu" src="../../assets/img/personal/touxiang.png" alt="">
      </a>
      <span class="bgwen" @click="doClick">
        <!--<router-link :to="{name: 'information'}">-->
        昵称
        <!--</router-link>-->
      </span>
      <div class="zhang" @click="doClickone">账户提现
        <!--<router-link :to="{name: 'jiazhanghu/zhanghutixian'}">账户提现</router-link>-->
        </div>
    </div>
    </div>
   <!--我的订单order-left-->
    <div class="order">
    <ul>
      <li class="order-left">我的订单</li>
      <li><a class="order-right" @click="doAll"> 查看所有订单 ></a></li>
    </ul>
    </div>
    <hr>
    <!--待支付行-->
    <div class="pay">
    <ul>
      <li>
        <a href="">
          <img src="../../assets/img/personal/daizhifu.png" alt="">
          <p>
            <router-link :to="{name: 'daizhifu'}">待支付</router-link>
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../../assets/img/personal/daifahuo.png" alt="">
          <p>
            <router-link :to="{name: 'daifahuo'}">待发货</router-link>
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../../assets/img/personal/daishouhuo.png" alt="">
          <p>
            <router-link :to="{name: 'daishouhuo'}">待收货</router-link>
          </p>
        </a>
      </li>
      <li>
        <a href="">
          <img src="../../assets/img/personal/jiaoyiwancheng.png" alt="">
          <p>
            <router-link :to="{name: 'jiaoyiwc'}">交易完成</router-link>
          </p>
        </a>
      </li>
    </ul>
    </div>
    <!--我的返金排号my-left-->
    <div class="my">
    <ul>
      <li class="my-left">我的返金排号
        <!--@click="look"-->
        <a class="my-right"  >
          <router-link :to="{name: 'myfanjin'}">查看更多></router-link>
          </a>
      </li>

    </ul>
    </div>
    <hr>
    <!--查看更多下拉-->
    <div class="more" >
    <ul>
      <li>
        <p>2017/06/26</p>
        <p>消费: ￥ 100</p>
        <p>排号: 10</p>

      </li>
      <li >
        <p>2017/06/26</p>
        <p>消费: ￥ 100</p>
        <p>排号: 10</p>

      </li>
      <li >
        <p>2017/06/26</p>
        <p>消费: ￥ 100</p>
        <p>排号: 10</p>

      </li>
      <li >
        <p>2017/06/26</p>
        <p>消费: ￥ 100</p>
        <p>排号: 10</p>

      </li>
    </ul>
    </div>
    <hr>
    <!--我的神灯值-->
    <!---->
    <div class="my-total">
    <ul >
      <li class="my-top">0</li>
      <li class="my-bottom">
        <router-link :to="{name: 'shendeng'}">我的神灯值</router-link>

      </li>
    </ul>
    </div>
    <!---->
      <div class="my-total">
    <ul>
      <li class="my-top">0</li>
      <li class="my-bottom">
        <router-link :to="{name: 'zuji'}">我的足迹</router-link>

      </li>
    </ul>
    </div>
    <!---->
      <div class="my-total">
    <ul>
      <li class="my-top">0</li>
      <li class="my-bottom">
        <router-link :to="{name: 'youhuiq'}">我的优惠券</router-link>
        </li>
    </ul>
  </div>
    <!---->
      <div class="my-total">
    <ul>
      <li class="my-top">0</li>
      <li class="my-bottom">
        <router-link :to="{name: 'jiaxinde/xindeg'}">我的心得</router-link>
        </li>
    </ul>
  </div>
    <hr>
    <!--我的商城-->
      <div class="my-shop">
    <ul >
      <li>
        <a href="">
          <img src="../../assets/img/personal/wodeshangcheng.png" alt="">
          <p class="city">
            <router-link :to="{name: 'shangch'}">我的商城</router-link>
            </p>
        </a>
      </li>

    </ul>
      </div>
    <!--实名认证-->
    <ul class="my-shop">
      <li>
        <a href="">
          <img src="../../assets/img/personal/shimingrenzhneg.png" alt="">
          <p class="city">
            <router-link :to="{name: 'shimingz/shiming'}">实名认证</router-link>
            </p>
        </a>
      </li>

    </ul>
    <!--收货地址-->
    <ul class="my-shop">
      <li>
        <a href="">
          <img src="../../assets/img/personal/shouhuodizhi.png" alt="">
          <p class="city">
            <router-link :to="{name: 'shouhuo'}">收货地址</router-link>
            </p>
        </a>
      </li>

    </ul>
    <!--关注公众号-->
    <ul class="my-shop">
      <li >
        <a href="">
          <img src="../../assets/img/personal/guanzhugongzhonghao.png" alt="">
      <p class="city">
        <router-link :to="{name: 'guanzhu'}">关注公众号</router-link>
        </p>
        </a>
      </li>

    </ul>
    <!--客服与反馈-->
    <ul class="my-shop">
      <li>
        <a href="">
          <img src="../../assets/img/personal/kehufankui.png" alt="">
       <p class="city">
         <router-link :to="{name: 'jiakefu/kefu'}">客服与反馈</router-link>
         </p>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
     data(){
       return{
//         isOpen:false,
       }

     },
    methods:{
//      look(){
//        this.isOpen =! this.isOpen;
//      },
      doClick(){
        this.$router.push({path: '/information'});
      },
      doAll(){
        this.$router.push({path: '/all'});
      },
      doClickone(){
        this.$router.push({path: '/jiazhanghu/zhanghutixian'});
      },
    }


  }
</script>
<style scoped>

  .wrapper1{
    width: 100%;
    height:33rem;
  }
  .Bg{
    width: 100%;
    position: relative;
  }
  .bg{
    height:6rem;
    background: red url(../../assets/img/personal/shangcengdatu.png) no-repeat;
    background-size: 100% 100%;
  }
  .bgtu{
    width: 2.3rem;
    height:2.3rem;
    position: absolute;
    left:2%;
    top:19%;

  }
  .bgwen{
    color: white;
    font-size: 0.8rem;
    font-weight:100;
    position: absolute;
    left:17%;
    top:29%;
  }
  .zhang{
    width: 3.5rem;
    height: 1rem;
    color: white;
    font-size: 0.7rem;
    font-weight:100;
    position: absolute;
    left:75%;
    top:70%;
    background-color: #000000;
    border-radius:1.6rem;
    text-align: center;
    opacity: 0.7;
  }
  /*<!--我的订单-->*/
  .order{
    height:2rem;
    overflow: hidden;
  }
  .order ul {
    position: relative;
  }
  .order-left{
    font-size: 0.6rem;
    font-weight: 300;
    margin-top: 0.6rem;
    position: absolute;
    left: 3%;
    top:1%;
  }
  .order-right{
    font-size: 0.6rem;
    font-weight: 200;
    margin-top: 0.6rem;
    float: right;
    position: absolute;
    left: 70%;
    top:10%;
  }
  .pay{
    height:2.3rem;
  }
  .pay ul{
    margin-left: 0.09rem;
    margin-top: 0.5rem;
  }
  .pay ul li{
    display:inline-block;
    font-size: 0.5rem;
    text-align: center;
    margin-left: 1.5rem;
  }
  .pay a{
    color: #4d4d4d;
    line-height: 0.95rem;
    letter-spacing: 0.03rem;
  }
  .pay a img {
    width:1.1rem;
  }
  /*<!--我的返金排号-->*/
  .my{
    height:2.4rem;
    /*overflow: hidden;*/
  }
  .my-left{
    font-size: 0.6rem;
    padding-top: 1rem;
    margin-left: 0.4rem;
    color: #4d4d4d;
  }
   .my-right{
    font-size:0.6rem;
    float: right;
    padding-top: 0.1rem;
     color: #4d4d4d;
  }
   .more ul li{
     border-bottom: 1px solid #4d4d4d;
   }

  .more ul li p{
    display: inline-block;
    font-size:0.56rem;
    padding-left: 1.3rem;
    color: #4d4d4d;

  }
/*!*我的神灯值*! "my-total"my-top my-bottom"*/
     .my-bottom{
       font-size:0.5rem;
       color: #4d4d4d;
     }
     .my-top{
       color: #e53e42;
     }
     .my-total{
       display: inline-block;
       font-size: 0.6rem;
       text-align: center;
       margin-left: 1.2rem;
     }
/*我的商城*/
   .my-shop {
     display: inline-block;
     font-size: 0.6rem;
     text-align: center;
     margin-left: 1.36rem;
     margin-top: 0.5rem;
   }
   .my-shop li a {
     color: #4d4d4d;
   }
   .city{
     font-size:0.5rem;
   }

  .my-shop li a img{
    width:1rem;
  }

</style>
